<!DOCTYPE html>
<html>
  <head>
    <title>${webArticleType.name}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	  <link rel="stylesheet" href="${s.base}/mobile/css/base.css">
	  <link rel="stylesheet" href="${s.base}/mobile/css/component.css">
	  <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
	  <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.css">
    <style type="text/css">
      body,html {
        background: #FFF;
      }
      .xyg-comp-banner{
        width:100%;
        height:200px;
      }
      .xyg-comp-banner img{
        width:100%;
        height:200px;
      }
      .xyg-article{width:90%;height:auto; margin:1rem 5% 0.1rem 5%;}
      .xyg-article .xyg-article-item{width:100%;height:auto; margin-bottom:0.5rem; padding-bottom: 0.5rem; border-bottom: 0.01rem solid #f4f4f4;}
      .xyg-article .xyg-article-item .xyg-article-item-pic{ width: 19%;
        height: 2.5rem;
        text-align: right;
        float: left;
        margin: 0px 2%;}
      .xyg-article .xyg-article-item .xyg-article-item-pic img{ width: 2.8rem;
        height: 96%;
        max-width: 100%;
        float: right;}
      .xyg-article .xyg-article-item .xyg-article-item-content{width: 75%;
        height: 2.5rem;
        float: left;
        margin-right: 2%;
        color: #0C0C0C;
      }
    </style>
  </head>
  <body>
  <div class="xyg-index">
    <#if webBannerList??&&(webBannerList?size gt 0)>
    <!--banner图开始-->
    <div class="xyg-comp-banner swiper-container">
      <div class="swiper-wrapper">
        <#list webBannerList as webBanner>
         <div class="swiper-slide"><img src="${webBanner.picture}" /></div>
        </#list>
      </div>
      <div class="swiper-pagination xyg-comp-banner-swiper"></div>
    </div>
    <!--banner图结束-->
    </#if>
    <!--课程内容开始-->
    <div class="xyg-article xyg-content">
    </div>
    <!--课程内容结束-->
  </div>

  
  
  </body>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="${s.base}/mobile/js/jquery-2.1.4.js"></script>
  <script src="${s.base}/mobile/js/jquery-weui.js"></script>
  <script src="${s.base}/mobile/js/dateUtil.js"></script>
  <script src="${s.base}/mobile/fonts/iconfont.js"></script>
  <script src="${s.base}/mobile/js/swiper.js"></script>
  <script src="${s.base}/mobile/js/component.js"></script>
  <script>
      var memberId='${memberId}';
      var id='${webArticleType.id}';
      var pageNum=0;
      var loading = false;  //状态标记
      var pageSize=5;
      $(document).ready(function(e) {
          $.fn.initXygCompBanner();
          sendPost();
          $(document.body).infinite();
          $(document.body).infinite().on("infinite", function() {
              if(loading) return;
              loading = true;
              sendPost();
          });
      });
      function sendPost() {
          pageNum++;
          $.post("/phone/articlePage",{
              pageNum : pageNum,
              pageSize : pageSize,
              typeId : id
          },function(resultInfo){
              if (resultInfo.code == 0){
                  if (resultInfo.data!=null && resultInfo.data.length > 0){
                      for(var i=0;i<resultInfo.data.length;i++){
                          var obj = resultInfo.data[i];
                          var content='<div class="xyg-article-item"><a href="/phone/article?id='+obj.id+'&memberId='+memberId+'">'+
                              '<div class="xyg-article-item-content">'+
                              '<div class="xyg-article-item-content-title">'+obj.title+
                              '</div>'+
                              '</div>'+
                              '<div class="xyg-article-item-pic">'+
                              '<img src="'+ obj.picture+'"/>'+
                              '</div>'+
                              '<div class="clearBoth"></div>'+
                              '</div>';
                          $(".xyg-content").append(content);
                          loading = false;
                          if(!resultInfo.hasNextPage){
                              $(document.body).destroyInfinite();
                          }
                      }
                  }
              }
          },"json");
      }


  </script>
</html>

